<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1">第{{$route.query.title+1}}章</el-menu-item>
    </el-menu>
    <div>
      <el-table :data="tableData" style="width: 100%" @cell-dblclick="handle" :row-class-name="tableRowClassName">
        <el-table-column type="index"  label="序号" width="50">

        </el-table-column>
        <el-table-column prop="periodName" label="题目" width="250">
          <template slot-scope="scope">
            <div v-if="!scope.row.isEdit">{{ scope.row.periodName }}</div>
            <div v-else>
              <el-input v-model="scope.row.periodName" id="name"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="free" label="是否免费" width="100">
          <template slot-scope="scope1">
            <!--{{isfree}}======{{scope1.row.isFree}}-->
            <!--{{cid}}-{{pid}}-{{title}}-->
            <span v-if="scope1.row.isFree===1 || isfree === 1" style="color: green">免费</span>
            <span v-if="scope1.row.isFree===0 && isfree === 0" style="color: red">收费</span>
            <span v-if="scope1.row.isFree==null && isfree ===0"><el-checkbox v-model="checked"/></span>
          </template>
        </el-table-column>
        <el-table-column prop="shipin" label="视频" width="160">
              <!--<el-button plain>视频按钮</el-button>-->
          <template slot-scope="scope" >
            <el-upload v-if=" scope.row.docUrl == null && scope.row.isshow1 === 0"
              class="upload-demo"
              action="http://localhost:8898/showdata/eduChapterPeriod/getPath"
              :on-success="handleAvatarSuccess"
              :limit=1
              >
              <el-button size="small" type="primary" @click="sz.id=scope.row.id">点击上传<i class="el-icon-film el-icon--right"></i></el-button>
            </el-upload>

            <el-upload v-if="scope.row.docUrl != null && scope.row.isshow1 === -1"
                       class="upload-demo"
                       action="http://localhost:8898/showdata/eduChapterPeriod/getPath"
                       :on-success="handleAvatarSuccess"
                       :limit=1
            >
              <el-button size="small" type="primary" @click="sz.id=scope.row.id">修改视频<i class="el-icon-film el-icon--right"></i></el-button>
            </el-upload>

            <el-link :href="scope.row.docUrl" target="_blank" v-if="scope.row.docUrl != null ">播放地址</el-link>
          </template>
          <!--:on-change="handleChanges"
          :on-success="getImgUrl"
          :file-list="fileLists"-->
        </el-table-column>
        <!--<el-table-column prop="kejian" label="课件" width="160">-->
              <!--<el-button plain>课件按钮</el-button>-->
        <!--</el-table-column>-->
        <!--<el-table-column prop="status" label="状态" width="140">-->
          <!--<template slot-scope="scope">-->
            <!--<span v-if="scope.row.status==0" style="color: blue">待审核</span>-->
            <!--<span v-if="scope.row.status==1" style="color: green">已审核</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column prop="caozuo" label="操作" width="180">
          <template slot-scope="scope">
            <el-button  v-if="scope.row.isshow == 0 " type="text" size="mini" @click="handleClick(scope.row)">{{
                scope.row.isEdit || scope.row.name === '' ? '完成' : '编辑'
              }}
            </el-button>
            <span v-if="scope.row.isEdit">
               <el-button
                 type="text" @click.native.prevent="deleteRow(scope.row,tableData)"
                 size="small">
              移除
            </el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div style="">
        <el-button type="warning"  @click="handleAdd" :style="{ display: visibleLine }">增加课时</el-button>
        <router-link :to="{name:'video2', query: {cid:cid,isfree:isfree}}">
          <el-button type="success"  :style="{ display: visibleSubmit }">完成返回</el-button>
        </router-link>
      </div>
    </div>

  </div>
</template>

<script>
import qs from 'qs'
export default {
  name: "ClassHour",
  data() {
    return {
      tableData: [],
      id:'',
      activeIndex: '1',
      checked: true,
      visibleSubmit:true,
      visibleLine:true,
      fileLists: [],
      sz:{
        id:'',
        docUrl:''
      },
      isfree:this.$route.query.isfree,
      cid:this.$route.query.cid
    }
  }, methods: {
    fz(){
      alert(2)
    },
    //视频上传
    handleAvatarSuccess(res, file) {
      this.fileLists.name=file.name;
      //this.imageUrl = URL.createObjectURL(file.raw);
      this.sz.docUrl=res;
      this.$axios2.post("showdata/eduChapterPeriod/upd",qs.stringify(this.sz)).then(r=>{
        /*alert(JSON.stringify(r.data))*/
        if (r.data){
          this.$message.success("上传成功！！");
          this.selectData();
        }
      })
      //this.form.advImg=res;
    },


    handleClick(row) {
      //console.log(row);
      // 动态设置数据并通过这个数据判断显示方式
      console.log(this.tableData);
      this.tableData.forEach((tab, index) => {
          //console.log(tab,index);
          if(row.index != index){
              this.tableData[index].isshow = -1;
          }else
            this.tableData[index].isshow1 = -1;
      });
      if (row.isEdit) {
        let name= document.getElementById("name").value;
        let len = name.split(" ").join("").length;
        if(name == "" || len == 0){
          this.$message({
            duration: 1000,
            message: '名称不能为空'
          });
          this.$set(row, 'isEdit', true);
        }else {
          this.$delete(row, 'isEdit');
          this.visibleLine = '';
          this.visibleSubmit = '';
          let data = new Object();
          data.id = row.id;
          data.periodName =row.periodName;
          data.createTime = row.createTime;
          data.chapterId = this.$route.query.pid;
          data.courseId = this.$route.query.cid;
          if(this.checked == true)
            data.isFree = 0;
          else
            data.isFree = 1;
          this.$axios.post("/showdata/eduChapterPeriod/update",qs.stringify(data)).then(res=>{
            console.log(res.data);
            this.$set(row, 'isFree',data.isFree);
            this.tableData.forEach((tab, index) => {
                this.tableData[index].isshow = 0;
              this.isshow = false ;
            });
            this.selectData();
          }),function () {
            alert("失败!")
          }
        }
      } else {
        this.$set(row, 'isEdit', true);
        this.visibleLine = 'none';
        this.visibleSubmit = 'none';
        if(row.isFree  == 1)
          this.checked = false;
        else
          this.checked = true;
        this.$set(row, 'isFree',null);
      }
    },
    handle(row, column, cell, event) {
    },
    handleAdd() {
      // 动态设置数据并通过这个数据判断显示方式
      this.isshow =false;
      this.tableData.push({
        isEdit: true,

        isshow:0
      });
      this.tableData.forEach((tab, index) => {
        this.tableData[index].isshow = -1;
      });
      this.tableData[this.tableData.length-1].isshow=0;
      if(this.isfree === 1 ){
        this.checked =false;
      }
      if (this.isfree === 1) {
        this.checked=false;
      }
      this.visibleLine = 'none';
      this.visibleSubmit = 'none';
    },
    tableRowClassName({row, rowIndex}) {
      // 把每一行的索引放进row
      row.index = rowIndex;
    },
    deleteRow(rows,row) {
      //rows.splice(index, 1);
      //console.log(rows);
      this.isshow = true;
      this.visibleLine = '';
      this.visibleSubmit = '';
      let data = new Object();
      data.id = rows.id
      this.$axios.post("/showdata/eduChapterPeriod/del",qs.stringify(data)).then(res=>{
        //console.log(res.data);
        this.$set(row, 'isFree',data.isFree);
        this.tableData.forEach((tab, index) => {
          this.tableData[index].isshow = 0;
        });
        this.selectData();
      }),function () {
        alert("失败!")
      }
    },
    handleBack(){
      this.$router.push({
        path:"/video2",
        query: {cid:this.$route.query.cid}
      });
    },
    selectData(){
      let id = this.$route.query.cid;
      let cid =this.$route.query.pid;
      this.$axios.post("/showdata/eduChapterPeriod/findChapterPeriodById/"+id+"/"+cid).then(res=>{
        this.tableData = res.data;
        console.log(this.tableData);
      }),function () {
        alert("失败!")
      }
    },
  },mounted(){
    this.selectData();
  }
}
</script>

<style scoped>
.finshButton {
  height: 40px;
  width: 600px;
  color: #F56C6C;
  background-color: #fef0f0;
  border-radius: 20px;
  border: #F56C6C solid 1px;
  margin-top: 10px;
}

.finshButton:hover {
  color: white;
  background-color: #F56C6C;
}
</style>
